<template>
    <div>
        <div class="container">
            <h1>完善信息</h1>
            <el-divider></el-divider>

            <div class="staffForm">
                <el-table :data="staffList">
                    <el-table-column label="序号" type="index" width="50"></el-table-column>
                    <el-table-column label="账号" prop="staff_number"></el-table-column>
                    <el-table-column label="姓名" prop="staff_name"></el-table-column>
                    <el-table-column label="职位" prop="staff_status"></el-table-column>
                    <!-- 展开项开始 -->
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="right" inline class="demo-table-expand">
                                <el-form-item label="性别">
                                    <span>{{ props.row.staff_sex }}</span>
                                </el-form-item>
                                <el-form-item label="电话号码">
                                    <span>{{ props.row.staff_phone }}</span>
                                </el-form-item>
                                <el-form-item label="地址">
                                    <span>{{ props.row.address }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <!-- 展开项结束 -->
                    <el-table-column fixed="right" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">完善信息</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 弹窗开始 -->
        <el-dialog title="完善信息" center :visible.sync="dailog" width="30%">
            <el-form :model="staff" :rules="ruleForm" ref="staff" label-width="80px">
                <el-form-item label="账户">
                    <el-input v-model="staff.staff_number" :disabled="true" style="width:200px;"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="staff_name">
                    <el-input v-model="staff.staff_name" placeholder="请输入姓名" clearable  style="width:150px;"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="staff_sex">
                    <el-select v-model="staff.staff_sex" placeholder="性别"  style="width:100px;">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系电话" prop="staff_phone">
                    <el-input v-model="staff.staff_phone" placeholder="请输入联系电话"  style="width:200px;" clearable></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="staff.address" placeholder="请输入现住址"  style="width:250px;" clearable></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dailog = false">取 消</el-button>
                <el-button type="primary" @click="updateCompany">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 弹窗结束 -->
    </div>
</template>
<script>
export default {
    name: 'Modify',
    data() {
        let validateName = (rule, value, callback) => {
            if (value) {
                const validateName = /^[\u4E00-\u9FA5]{2,4}$/;
                if (validateName.test(value)) {
                    return callback();
                } else {
                    return callback(new Error('必须为中文'));
                }
            } else {
                return callback(new Error('员工姓名不能为空'));
            }
        };
        let validatePhone = (rule, value, callback) => {
            if (value) {
                // const phone = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
                const phone = /^(1[3-9])\d{9}$/;
                if (phone.test(value)) {
                    return callback();
                } else {
                    return callback(new Error('请输入正确的电话号'));
                }
            } else {
                return callback(new Error('电话号码不能未空'));
            }
        };
        return {
            staffList: [
                {
                    staff_id: '',
                    staff_number: '',
                    staff_password: '',
                    staff_name: '',
                    staff_phone: '',
                    staff_status: '',
                    staff_sex: '',
                    address: ''
                }
            ],
            staff: {
                staff_number: '',
                staff_password: '',
                staff_name: '',
                staff_phone: '',
                staff_sex: '',
                address: ''
            },
            dailog: false,
            ruleForm: {
                staff_name: [{ required: true, validator: validateName, trigger: 'blur' }],
                staff_phone: [{ required: true, validator: validatePhone, trigger: 'blur' }]
            }
        };
    },
    methods: {
        getData() {
            let param = new URLSearchParams();
            param.append('staff_number', localStorage.getItem('user_name'));
            this.$axios({
                method: 'post',
                url: 'staff/queryName',
                data: param,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
            })
                .then((res) => {
                    if (res.data.code == 1) {
                        this.staffList = res.data.data;
                    }
                })
                .catch((error) => {});
        },
        handleClick(row) {
            this.dailog = true;

            this.staff.staff_number = row.staff_number;
            this.staff.staff_name = row.staff_name;
            this.staff.staff_sex = row.staff_sex;
            this.staff.staff_phone = row.staff_phone;
            this.staff.address = row.address;
        },
        //完善信息
        updateCompany() {
            this.$refs['staff'].validate((valid) => {
                if (valid) {
                    this.$axios({
                        method: 'put',
                        url: 'staff/staffUpdate',
                        data: JSON.stringify(this.staff),
                        headers: { 'Content-Type': 'application/json' }
                    }).then((res) => {
                        if ((res.data.code = 1)) {
                            this.$router.go(0);
                        } else {
                            this.$message.info(res.data.mess);
                        }
                    });
                } else {
                    return false;
                }
            });
        }
        // updateClick(row) {}
    },
    created() {
        this.getData();
    }
};
</script>
<style>
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>